<template>
  <div  class="p16 flex-column-null-between container" v-loading="loading">
    <el-row style="">
      <el-col :span="7" >
        <div id="nowCacheChartContainer" style="background-color: white;height: calc(calc(100vh - 200px) / 2);border-radius: 15px;"></div>
      </el-col>
      <el-col :span="7" style="margin-left: 50px">
        <div id="nowThreadChartContainer" style="background-color: white;height: calc(calc(100vh - 200px) / 2);border-radius: 15px;"></div>
      </el-col>
      <el-col :span="7" style="margin-left: 50px">
          <div class="monitor-container"  style="background-color: white;height: calc(calc(100vh - 200px) / 2);">
            <div style="padding-top: 20px">
              <div class="monitor-item">
                <div style="display: flex; justify-content: space-between;">
                  <span>系统CPU使用率</span>
                  <span id="usage-value">{{adminControl.cpu.sysCpuLoad}}</span>
                </div>
                <div class="progress-container">
                  <div class="progress-bar" :style="{width:adminControl.cpu.sysCpuLoad}"></div>
                </div>
              </div>
              <div class="monitor-item">
                <div style="display: flex; justify-content: space-between;">
                  <span>进程CPU使用率</span>
                  <span id="temp-value">{{adminControl.cpu.processCpuLoad}}</span>
                </div>
                <div class="progress-container">
                  <div class="progress-bar" :style="{width:adminControl.cpu.processCpuLoad,background: 'linear-gradient(90deg, #ff9a9e 0%, #fecfef 100%)'}"></div>
                </div>
              </div>
            </div>
          </div>
      </el-col>
    </el-row>

    <el-row style="height:calc(calc(100% + 80px) / 2); background-color: white">
      <el-col :span="12">
        <div id="cacheChartContainer" style="background-color: white;height: calc(calc(100vh - 100px) / 2);"></div>
      </el-col>


      <el-col :span="12">
        <div id="cpuChartContainer" style="background-color: white;height: calc(calc(100vh - 100px) / 2);"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getAdminControlSse,getAdminControl} from "@/api/control";
import * as echarts from 'echarts';
export default {
  components:{
  },
  data() {
    return {
      loading:true,
      nowCacheChart: null,
      nowCacheChartOption:{
        title: {
          text: '内存'
        },
        series: [
          {
            type: 'pie',
            data: [
              {
                value: 0,
                name: "已使用0MB"
              },
              {
                value: 0,
                name: "已使用0MB"
              }
            ]
          }
        ]
      },
      nowThreadChart:null,
      nowThreadChartOption:{
        title: {
          text: '当前线程'
        },
        xAxis: {
          type: 'category',
          data: ['活动线程','峰值']
        },
        yAxis: {},
        tooltip: {
          trigger: 'item',
          formatter: function(params) {
            return params.name + '<br />' + '数量: ' + params.value;
          }
        },
        series: [
          {
            type:'bar',
            data:[
              {
                value:0,
                itemStyle:{
                  color:'red',
                }
              },
              {
                value:0,
                itemStyle:{
                  color:'blue',
                }
              }
            ]
          }
        ]
      },

      adminControl:{
        cache:{
          max:0,
          used:0,
          committed:0
        },
        thread:{
          activeThread:0,
          peakThreadCount:0,
          totalStartedThreadCount:0
        },
        cpu:{
          sysCpuLoad:'',
          processCpuLoad:'',
          sysCpuLoadDouble:'',
          processCpuLoadDouble:'',
        },
        cacheList:[],
        threadList:[],
        cpuList:[]
      },

      cacheChartContainer:{},
      cacheChart:{
        title: {
          text: '内存监控'
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        legend: {
          data: ['最大内存', '已用内存']
        },
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            name:'最大内存',
            smooth: true,
            showSymbol:false
          },
          {
            data: [32, 32, 38, 33, 39],
            type: 'line',
            name:'已用内存',
            smooth: true,
            showSymbol:false
          }
        ]
      },
      cpuChart:{
        title: {
          text: 'CPU监控'
        },
        legend: {
          data: ['服务器总消耗', '系统消耗']
        },
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
          {
            data: [10, 22, 28, 23, 19],
            type: 'line',
            smooth: true,
            name:'服务器总消耗',
            showSymbol:false
          },
          {
            data: [12, 32, 18, 3, 9],
            type: 'line',
            smooth: true,
            name:'系统消耗',
            showSymbol:false
          }
        ]
      }

    }
  },
  mounted() {
    this.findAdminControl();
    this.initNowCacheChart();
    this.initNowThreadChart();
    this.initCacheChart();
    this.initCpuChart();
  },
  created() {
  },
  methods: {
    refreshConsole(){
      this.refreshNowCacheChart();
      this.refreshNowThreadChart();
      this.refreshCacheChart();
      this.refreshCpuChart();
    },
    refreshNowCacheChart(){
      this.nowCacheChartOption.series[0].data[0].value =  this.adminControl.cache.max - this.adminControl.cache.used;
      let noUsed = "未使用:"+(this.adminControl.cache.max - this.adminControl.cache.used) + "MB";
      this.nowCacheChartOption.series[0].data[0].name = noUsed;
      this.nowCacheChartOption.series[0].data[1].value =  this.adminControl.cache.used;
      this.nowCacheChartOption.series[0].data[1].name = "已使用:"+this.adminControl.cache.used + "MB";
      if(this.nowCacheChart != null){
        this.nowCacheChart.setOption(this.nowCacheChartOption);
      }
    },
    refreshNowThreadChart(){
      this.nowThreadChartOption.series[0].data[0].value =  this.adminControl.thread.activeThread;
      this.nowThreadChartOption.series[0].data[1].value =  this.adminControl.thread.peakThreadCount;
      if(this.nowThreadChart != null){
        this.nowThreadChart.setOption(this.nowThreadChartOption);
      }
    },
    initNowCacheChart() {
      // 基于准备好的dom，初始化echarts实例
      this.nowCacheChart = echarts.init(document.getElementById("nowCacheChartContainer"));
      this.refreshNowCacheChart();
    },
    initNowThreadChart(){
      // 基于准备好的dom，初始化echarts实例
      this.nowThreadChart = echarts.init(document.getElementById("nowThreadChartContainer"));
      // 指定图表的配置项和数据
      // 使用刚指定的配置项和数据显示图表。
      this.refreshNowThreadChart();
    },
    refreshCacheChart(){
      this.cacheChart.xAxis.data = this.adminControl.cacheList.map(item=>item.time);
      this.cacheChart.series[0].data = this.adminControl.cacheList.map(item=>item.max);
      this.cacheChart.series[1].data = this.adminControl.cacheList.map(item=>item.used);
      if(this.cacheChartContainer != null){
        this.cacheChartContainer.setOption(this.cacheChart);
      }
    },
    initCacheChart(){
      this.cacheChartContainer = echarts.init(document.getElementById("cacheChartContainer"));
      this.refreshCacheChart();
    },
    refreshCpuChart(){
      this.cpuChart.xAxis.data = this.adminControl.cpuList.map(item=>item.time);
      this.cpuChart.series[0].data = this.adminControl.cpuList.map(item=>item.sysCpuLoadDouble);
      this.cpuChart.series[1].data = this.adminControl.cpuList.map(item=>item.processCpuLoadDouble);
      if(this.cpuChartContainer != null){
        this.cpuChartContainer.setOption(this.cpuChart);
      }
    },
    initCpuChart(){
      this.cpuChartContainer = echarts.init(document.getElementById("cpuChartContainer"));
      this.refreshCpuChart();
    },

    findAdminControlSse(){
      getAdminControlSse((msg)=>{
         this.adminControl = msg;
         this.refreshConsole();
      })
    },
    async findAdminControl(){
      let res = await getAdminControl({});
      if(res.code === '200'){
        this.loading = false;
        this.adminControl = res.data;
        this.refreshConsole();
        this.findAdminControlSse();
      }
    }
  },

}
</script>


<style src="../../css/index.scss" lang="scss"></style>
<style lang="scss" scoped>
.search-item{
  float: left;
  margin: 0 20px 20px 0;
  span{
    color: #606266;
    font-size: 14px;
    margin-right: 0px;
  }
}
.monitor-container {
  padding-left: 20px;
  padding-right: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  color: white;
  font-family: Arial, sans-serif;
}
.monitor-item {
  margin-top: 20px;
}
.progress-container {
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  height: 20px;
  margin: 10px 0;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer 2s infinite;
}
@keyframes shimmer {
  100% { left: 100%; }
}
</style>
